<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img src="../../assets/zjt2.png" alt="" class="back" @click="back()" />
        </div>
        <div class="head-search" v-show="status==1">{{ycUserResumeEntity.userName}}的简历</div>
      </div>
    </div>
    <div class="content">
      <div class="block">
        <div class="block-left">
          <img :src="ycUserResumeEntity.userPortrait" alt=""/>
        </div>
        <div class="block-div">
          <div class="name">{{ycUserResumeEntity.userName}}</div>
          <div>
            <span>年龄：</span>
            {{ ycUserResumeEntity.age }}
          </div>
          <div v-if="find">
            <span>电话：</span>
            ******
          </div>
          <div v-else>
            <span>电话：</span>
            {{ ycUserResumeEntity.tel }}
          </div>
          <div>
            <span>微信：</span>
            <!-- 123***789 -->
            {{ ycUserResumeEntity.wechat }}
          </div>
          <div>
            <span>邮箱：</span>
            <!-- 123***789@qq.com -->
            {{ ycUserResumeEntity.email }}
          </div>
        </div>
      </div>
      <div class="block"  v-for="item in ycUserIntentionJobList">
        <div class="block-left">
          <span>求职意向</span>
          <div>{{ item.positionName }}</div>
        </div>
        <div class="block-div">
          <div>
            <span>工作城市：</span>
            <!-- 大连市 -->
            {{ item.cityName }}
          </div>
          <div>
            <span>期望薪资：</span>
            <!-- 7-9k -->
            {{ item.expectedSalaryName }}
          </div>
          <div>
            <span>求职状态：</span>
            <!-- 离职-暂不考虑 -->
            {{ item.jobStatusName }}
          </div>
          <div>
            <span>工作年限：</span>
            <!-- 1-3年 -->
            {{ item.workYearName }}
          </div>
        </div>
      </div>
	  <div class="blocks" v-if="ycUserExperienceList" v-for="item in ycUserExperienceList">
      <p>工作经历</p>
      <div class="blocks-div">{{ item.companyName }}</div>
      <div class="blocks-div">
        {{ item.jobName }}&nbsp;·&nbsp;<span>{{ item.entryTime }}至{{ item.departureTime }}</span>
      </div>
      <div class="blocks-div1">
        <div class="blocks-title">内容：</div>
        <div class="blocks-test">{{ item.description }}</div>
      </div>
      </div>
	    <!-- 教育经历 -->
      <!-- 有数据赋值一下  -->
      <div class="blocks" v-if="ycUserEducationList" v-for="item in ycUserEducationList">
        <p>教育经历</p>
        <div class="blocks-div">{{ item.school }}</div>
        <div class="blocks-div">
          {{ item.professional }}&nbsp;·&nbsp;<span>{{ item.admissionTime }}至{{ item.graduationTime }}</span>
        </div>
        <div class="blocks-div1">
          <div class="blocks-title">简介：</div>
          <div class="blocks-test">{{ item.description }}</div>
        </div>
      </div>
      <div class="clear" v-show="status == 1"></div>
    </div>
    <div class="bottom" v-show="bool">
      <div class="btm-left">
        <img src="../../assets/shoucang.png" alt="" v-show="store===false" @click="storeOn(0)"/>
        <img src="../../assets/shoucang_1.png" alt="" v-show="store===true" @click="storeOn(1)" />
      </div>
      <div class="btm-right">
        <div @click="getFindPhone()">联系方式</div>
        <div @click="goInterview()">邀约面试</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {MessageBox, Toast} from 'mint-ui'

export default {
  inject: ['reload'],
  name: 'companyResume',
  components: {},
  created () {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    this.getUserId()
	  this.init()
  },
  mounted () {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
    this.$http({
      method: 'get',
      url: Vue.prototype.AppURL + '/user/query/company/collect',
      params: {
        companyId: this.companyId,
        resumeId: this.userId
      }
    }).then(({data}) => {
      if (data.data) {
        this.store = true
      } else {
        this.store = false
      }
    })
  },
  // data() 为变量赋值等
  data () {
    return {
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      popupVisible: false,
      bool: false,
      find: false,
      companyId: localStorage.getItem('cache_company_id'),
      store: false,
      userId: '',
	    ycUserResumeEntity: [],
	    ycUserIntentionJobList: [],
	    ycUserExperienceList: [],
	    ycUserEducationList: []
    }
  },
  // methods 编写js函数
  methods: {
    init () {
      this.$http({
        method: 'get',
        params: {
          userId: this.userId
        },
        url: 'api/userResume/personResume'
      }).then(({data}) => {
        // 简历基本信息
        this.ycUserResumeEntity = data.userResume[0]
        this.ycUserResumeEntity.userPortrait = Vue.prototype.AppURL + '/file/' + data.userResume[0].resumePortrait
        // 工作经历
        this.ycUserExperienceList = data.userExperience
        // 教育经历
        this.ycUserEducationList = data.userEducation
        // 求职意向信息
        this.ycUserIntentionJobList = data.ycUserIntentionJobList
      })
    },
    getUserId () {
      this.userId = localStorage.getItem('company_resume_user_id')
      if (!this.userId) {
        this.userId = this.$route.params.userId
        localStorage.setItem('company_resume_user_id', this.userId)
      }

      this.bool = localStorage.getItem('company_resume_bool')
      if (!this.userId) {
        this.bool = this.$route.params.bool
        localStorage.setItem('company_resume_bool', this.bool)
      }

      if (this.$route.params.find) {
        this.find = this.$route.params.find
      }
    },
    back () {
      this.$router.go(-1) // 返回上一层
    },
    go (r) {
      this.$router.push(r)
    },
    getFindPhone () {
      if (this.find) {
        MessageBox.confirm('您确定花费40积分获取该简历的联系方式吗？').then(action => {
          this.find = false
          this.$http({
            method: 'get',
            url: Vue.prototype.AppURL + '/userIntentionJob/update/company/member',
            params: {
              companyId: this.companyId
            }
          }).then(({data}) => {
            console.log(data)
          })
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    goInterview () {
      this.$http({
        method: 'get',
        url: Vue.prototype.AppURL + '/user/exits/user/inter',
        params: {
          companyId: this.companyId,
          resumeId: this.userId,
          recrutId: this.userId
        }
      }).then(({data}) => {
        console.log(data.data, "--------")
        if (data.data) {
          this.$router.push('/invite')
        } else {
          Toast('已邀约,无需重复操作')
        }
      })
    },
    xg () {
      this.popupVisible = !this.popupVisible
    },
    storeOn (i) {
      if (i == 0) {
        this.store = true
        // 个人收藏表添数据
        this.collect()
      } else if (i == 1) {
        MessageBox.confirm('确定要取消收藏吗').then(action => {
          this.store = false
          this.unCollect()
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    collect () {
      this.$http({
        method: 'post',
        url: Vue.prototype.AppURL + '/user/save/company/collect',
        data: {
          companyId: this.companyId,
          resumeId: this.userId
        }
      }).then(({data}) => {
        if (data.data) {
          Toast('收藏成功')
        } else {
          Toast('收藏失败')
        }
      })
    },
    unCollect () {
      this.$http({
        method: 'get',
        url: Vue.prototype.AppURL + '/user/delete/company/collect',
        params: {
          companyId: this.companyId,
          resumeId: this.userId
        }
      }).then(({data}) => {
        if (data.data) {
          Toast('取消收藏成功')
        } else {
          Toast('取消收藏失败')
        }
        this.init()
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #3e63a8;
}
.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.xg {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #3e63a8;
}
.clear{
  width: 100%;
  height: 30px;
}
.block {
  width: 100%;
  box-shadow: 2px 2px 5px #c7c7c7;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
}
.block img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.block-div {
  flex: 1;
  display: flex;
  flex-flow: column;
  box-sizing: border-box;
  padding-left: 20px;
}
.block-left {
  display: flex;
  flex-flow: column;
  align-items: center;
  font-size: 14px;
  width: 100px;
}
.block-left div {
  margin-top: 10px;
  color: #3e63a8;
}
.block-div div {
  font-size: 12px;
  padding: 3px 0;
}
.name {
  font-size: 16px !important;
  font-weight: 900;
  padding-top: 10px;
}
.blocks {
  width: 100%;
  box-shadow: 2px 2px 5px #c7c7c7;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
}
.blocks p {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  text-align: center;
}
.blocks .blocks-div {
  box-sizing: border-box;
  width: 100%;
  padding: 5px 0;
  display: flex;
  align-items: center;
}
.blocks-div1 {
  box-sizing: border-box;
  width: 100%;
  padding: 5px 0;
  display: flex;
}
.blocks-title {
  width: 50px;
}
.blocks span {
  font-size: 12px;
  color: #757575;
}
.blocks-test {
  flex: 1;
}
.mint-popup {
  width: 50%;
  height: 150px;
  background: #fff;
  top: 40px;
  left: 73%;
  overflow: visible;
  border-radius: 10px;
}
.sanjiao {
  width: 10px;
  height: 10px;
  background-color: #fff;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  position: absolute;
  top: -5px;
  right: 10px;
}
.pop-div{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #eee;
  color: #333;
  height: 25%;
  box-sizing: border-box;
  font-size: 14px;
}
.pop-div:last-child{
  border: 0;
}
.bottom{
  width: 100%;
  position: fixed;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px 20px;
  align-items: center;
}
.btm-left{
  display: flex;
  flex-flow: column;
  align-items: center;
  font-size: 12px;
}
.btm-left img{
  width: 20px;
}
.btm-right{
  display: flex;
}
.btm-right div{
  background: #3e63a8;
  color: #fff;
  margin-left: 10px;
  border-radius: 10px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 30px;
}
</style>
